import { FC } from "react";
import { Tabs, Search } from "react-vant";
import { getList } from "../../service";
import { TabState } from "../../types";
import { useRequest } from "../../hooks/useRequest";
import { useNavigate } from "react-router-dom";
const Index: FC = () => {
  const { error, data, loading } = useRequest<TabState[]>(getList);
  const navigate = useNavigate();
  if (loading) {
    return <>数据加载中···</>;
  }
  if (error) {
    return <>网站报错: {error}</>;
  }
  return (
    <div className="home">
      <Search onFocus={() => navigate("/search")}></Search>
      <Tabs defaultActive={1}>
        {data &&
          data.data.map((v, i) => {
            return (
              <Tabs.TabPane title={v.title} key={i}>
                {v.children.map(v => {
                  return (
                    <dl
                      onClick={() => navigate("/detail/" + v.id, { state: v })}
                      key={v.id}
                    >
                      <dt>
                        <img src={v.image} alt="" />
                      </dt>
                      <dd>
                        <h3>
                          {v.title} {v.auth}
                        </h3>
                        <p>{v.description}</p>
                      </dd>
                    </dl>
                  );
                })}
              </Tabs.TabPane>
            );
          })}
      </Tabs>
    </div>
  );
};
export default Index;
